<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="/ordermaker/pages/layui/css/layui.css">
</head>
<body style="background-color: #F2F2F2;">
<!--#include("head.html")-->
<div style="padding: 20px;width: 90%;margin-left: 10%;">
    <div class="layui-row layui-col-space15">
        #for(data:datas)
        #if(data.isState())
        #if(data.getId()==null)
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-body">
                    日期：#date(data.getDay(),"YYYY年MM月dd日")<br>
                    星期：#("星期"+data.getXingqi())<br>
                    节次：#("第"+data.getJieci()+"节")<br>
                    录课教师：#(data.getSheying())<br>
                    <button name="yuyue" data-day="#(data.getDay())" data-jieci="#(data.getJieci())" data-sheying="#(data.getSheying())" data-xingqi="#(data.getXingqi())" type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-btn-fluid">预约</button>
                    <!--<button name="quxiaoyuyue" data-id="" data-name="" type="button" class="layui-btn layui-btn-danger layui-btn-xs layui-btn-fluid">取消预约</button>-->
                </div>
            </div>
        </div>
        #else
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-body">
                    日期：#date(data.getDay(),"YYYY年MM月dd日")<br>
                    星期：#("星期"+data.getXingqi())<br>
                    节次：#("第"+data.getJieci()+"节")<br>
                    录课教师：#(data.getSheying())<br>
                    <button name="quxiaoyuyue" data-id="#(data.id)" data-name="" type="button" class="layui-btn layui-btn-danger layui-btn-xs layui-btn-fluid">取消预约</button>
                </div>
            </div>
        </div>
        #end
        #else
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div style="display:block;background-color: #ccc;width: 100%;position:absolute;height: 100%;opacity: 0.5;z-index: 1;left: 0px;top: 0px;"></div>
                    日期：#date(data.getDay(),"YYYY年MM月dd日")<br>
                    星期：#("星期"+data.getXingqi())<br>
                    节次：#("第"+data.getJieci()+"节")<br>
                    录课教师：#(data.getSheying())<br>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-xs layui-btn-fluid layui-btn-disabled">不可预约</button>
                </div>
            </div>
        </div>
        #end
        #if((for.index+1)%5==0)
        <div class="layui-col-md2" style="height: 200px;">

        </div>
        #end
        #end
    </div>
</div>
<div class="layui-row" style="width: 60%;margin-left: 20%;">
    <div class="layui-col-md2">
        <button type="button" name="pre" data-page="#(page)" class="layui-btn layui-btn-radius layui-btn-warm layui-btn-fluid">上一星期</button>
    </div>
    <div class="layui-col-md2 layui-col-md-offset8">
        <button type="button" name="next" data-page="#(page)" class="layui-btn layui-btn-radius layui-btn-warm layui-btn-fluid">下一星期</button>
    </div>
</div>
<script src="/ordermaker/pages/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element','layer'], function(){
        var element = layui.element;
        layui.jquery("[name='yuyue']").click(function (event) {
            var datas=event.currentTarget.dataset;
            layer.prompt({
                formType: 2,
                title: '请输入你的姓名',
                area: ['200px', '20px'] //自定义文本域宽高
            }, function(value, index, elem){
                // alert(value); //得到value
                datas.name=value;
                layui.jquery.ajax({
                    url: "/ordermaker/yuyue",
                    type: 'post',//method请求方式，get或者post
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    xhrFields:{
                        withCredentials:true
                    },
                    dataType: 'json',//预期服务器返回的数据类型
                    data: datas,//表格数据序列化
                    success: function (res) {//res为相应体,function为回调函数
                        console.log(res);
                        if(res.erro===0){
                            layer.alert('预约成功了，记得准时赴约哦！！！',function (index) {
                                layer.closeAll();
                                location.href="/ordermaker/list?page=#(page)"
                            });
                        }else{
                            layer.alert('课都约不到，日子没发过了！！！');
                        }
                    },
                    error: function (res) {
                        console.log(res);
                        layer.alert('系统和别人私奔了，伤心~');
                    }
                });
            });
        });
        layui.jquery("[name='quxiaoyuyue']").click(function (event) {
            var datas=event.currentTarget.dataset;
            layer.prompt({
                formType: 2,
                title: '请输入你的姓名',
                area: ['200px', '20px'] //自定义文本域宽高
            }, function(value, index, elem){
                // alert(value); //得到value
                datas.name=value;
                layui.jquery.ajax({
                    url: "/ordermaker/quxiaoyuyue",
                    type: 'post',//method请求方式，get或者post
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    xhrFields:{
                        withCredentials:true
                    },
                    dataType: 'json',//预期服务器返回的数据类型
                    data: datas,//表格数据序列化
                    success: function (res) {//res为相应体,function为回调函数
                        console.log(res);
                        if(res.erro!=0){
                                layer.alert('兄嘚，你取消别人的课干嘛！！！')
                        }else{
                            layer.alert('你的约课取消了，记得哦！！！',function (index) {
                                layer.closeAll();
                                location.href="/ordermaker/list?page=#(page)"
                            });
                        }
                    },
                    error: function (res) {
                        console.log(res);
                        layer.alert('系统和别人私奔了，伤心~');
                    }
                });
            });
        });
        layui.jquery("[name='pre']").click(function (event) {
            var datas=event.currentTarget.dataset;
            var page=parseInt(datas.page);
            if(page<=1){
                layer.alert('时光一去不复返，不可以预约之前的课哦！！！');
            }else{
                location.href="/ordermaker/list?page="+(page-1);
            }
        });
        layui.jquery("[name='next']").click(function (event) {
            var datas=event.currentTarget.dataset;
            var page=parseInt(datas.page);
            if(page>=4){
                layer.alert('兄die，我觉得下个月的事情还是下个月来吧');
            }else{
                 location.href="/ordermaker/list?page="+(page+1);
            }
        });
    });
</script>
</body>
</html>